DAY6 設置與管理專案

2024 iThome 鐵人賽

DAY 6

佛心分享-SideProject30

新手開發日記：跟著ChatGPT做記帳網頁系列第 6 篇

16th鐵人賽

禮記是Lizzy

2024-09-20 00:06:55

81 瀏覽

分享至

今天要將專案的結構進一步整理，讓專案更方便管理和維護。要確保專案中的不同部分（HTML、CSS、JavaScript）能夠正確組織起來，這步驟就非常重要，也為未來功能擴展做足準備。

確定專案的基本結構

專案結構應該要清晰，才能方便維護、尋找和管理，我建置了一個「Budget_APP」資料夾，裡面分別放置了HTML、CSS、JavaScript、資源文件夾（可以存放文字或字體）以及說明文件（說明此應用如何使用）。

檢查與整理HTML文件

index.html 應該作為核心，因為他會引用外部的CSS和JavaScript檔。為了讓結構更清晰，可以加入一些註記。（HTML檔的註解使用<!— —>）

<!DOCTYPE html>
<html lang="zh-Hant">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scal=1.0">
        <title>記帳小工具</title>
        <!--引入CSS檔-->
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>記帳小工具</h1>

        <!--記帳輸入區域-->
        <div class="input-section">
            <input type="text" id="description" placeholder="請輸入支出類型">
            <input type="number" id="amount" placeholder="請輸入支出金額">
            <input type="text" id="note" placeholder="備註">
            <button onclick="addExpense()">保存紀錄</button>
        </div>

        <!--記帳輸出區域-->
        <dic class="output-section">
            <h2>記帳紀錄</h2>
            <ul id="expense-list"></ul>
        </dic>

        <!--引入JavaScript檔-->
        <script src="app.js"></script>
    </body>
</html>

整理CSS文件

一樣加入註解，讓每個部分存放的樣式規則更明暸，若需要維護和增加功能就能快速找到。（CSS檔的註解使用/**/）

/*全局樣式*/
body{
    background-color: #E7D7C9;
    font-family: Arial, Helvetica, sans-serif;
    color: #A38F85;
}

/*標題樣式*/
h1{
    text-align:center;
    color: #A38F85;
}

/*輸入區域樣式*/
.input-section{
    text-align: left;
    margin: 20px 0;
}

input{
    margin: 10px;
    padding: 10px;
    border: 1px solid #cdc6c3;
}

/*按鈕樣式*/
button{
    padding: 10px 20px;
    background-color: #cdc6c3;
    color: #A38F85;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover{
    background-color: #d4b2a7;
}

/*記帳紀錄區域樣式*/
.output-section{
    width: 80%;
    margin: 0 auto;
    background-color: #d4b2a7;
    padding: 20px;
    border-radius: 8px;
}

ul{
    list-style-type: none;
    padding: 0;
}

ul li{
    background-color: #ede9e3;
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

整理JavaScript文件

JavaScript則是在註解加入互動邏輯，這樣就能集中管理功能和數據處理。（JavaScript檔的註解使用//）

function addExpense(){
    //獲得輸入的類別（描述）、金額和備註
    let description = document.getElementById("description").value;
    let amount = document.getElementById("amount").value;
    let note = document.getElementById("note").value;

    //驗證輸入
    if(description==""||amount==""){
        alert("請輸入完整支出類別與金額！");
        return;
    }

    //紀錄顯示在清單
    let expenseList = document.getElementById("expense-list");
    let listItem = document.createElement("li");

    //顯示格式
    listItem.innerHTML = `${description} - $${amount} <br> 備註：${note}`;
    expenseList.appendChild(listItem);

    //清空輸入
    document.getElementById("description").value="";
    document.getElementById("amount").value="";
    document.getElementById("note").value="";
}

最後確認所有文件都能正確連結，並且功能都能正常工作，使用Live Server檢查也都沒問題，今天的進度就完成了！！